<template>

	<view>
		<view class="content">

			<z-paging ref="paging" v-model="dataList" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>

					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="160" @btnClick="scan">
						<template #BtnContent>
							<u-icon name="scan" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>

					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="add">
						<template #BtnContent>
							<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
					<u-navbar :fixed="false" title="设备管理" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
						leftIconColor="#fff" style="width: 100%;">
						<view class="u-nav-slot" slot="right">
							<m-capsule></m-capsule>
						</view>
					</u-navbar>
					<view class="TabsBox">
						<view class="example-body">
							<uni-datetime-picker v-model="singleTimes" @maskClick="PickerIndex = 1"
								@show="PickerIndex = 99999999999" :style="{'z-index':PickerIndex}" @change="ChangeDate"
								:clearIcon="false" type="daterange" :end="EndDate"
								rangeSeparator="至"></uni-datetime-picker>
						</view>
						<view style="width: 10%;display: flex;align-items: center;justify-content: end;">
							<uni-icons fontFamily="CustomFontPlatform" style="font-weight: 600;" color="#999"
								@click="OpenFilterPopup" :size="20">{{$utils.toUniCode('&#xe628;')}}</uni-icons>
						</view>

					</view>
				</template>

				<view style="padding: 0 10px;">
					<view class="CardBox" @click="itemClick(row,index)" v-for="(row, index) in dataList" :key="index">
						<view class="CardMainBox">
							<view style="color:black;font-size:28rpx;margin-top:8px">
								<text>{{row.BillNo}}</text>
							</view>
							<view style="margin-top: 8px;">
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="点检单号:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillNo}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="点检设备:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.EquipmentName}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="点检日期:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.BillDate}}</text>
										</view>
									</template>
								</m-field>
								<m-field valueFontSize="24rpx" labelFontSize="24rpx" paddings="8rpx"
									:borderBottom="false" label="点检人:">
									<template v-slot:custom-value>
										<view class="x-f">
											<text>{{row.CheckupMan}}</text>
										</view>
									</template>
								</m-field>

							</view>

						</view>
					</view>

				</view>
				<template #bottom>
					<tab-bar ref="tabbar" :backData='moduleData_show'></tab-bar>
				</template>

			</z-paging>
		</view>

		<u-popup class="MainPopup" :show="ShowFilterPopup" mode="bottom" :round="12" zIndex="999999"
			@close="closeFilterPopup">
			<view class="f-dc" style="height: 50vh;" :style="$utils.disposeSafeBottomFun()">

				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="false"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>

				<view class="PopupMainBox">
					<view>
						<view class="TitleBox">
							<text>起止时间</text>
						</view>

						<view class="CheckBox">
							<view class="My_Picker_Box">
								<view class="PickMainBox">
									<u-icon name="calendar" color="#c0c4cc" size="24"></u-icon>
									<view @click="addTime('开始')" class="My_Picker_Text">
										<text>{{FormData.FBDate}}</text>
									</view>
									<text>至</text>
									<view @click="addTime('结束')" class="My_Picker_Text">
										<text>{{FormData.FEDate}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="margin-top: 20px;">
						<view class="TitleBox">
							<text>设备名称</text>
						</view>
						<u-cell-group :border='false'>
							<u-cell :isLink="true" :title='FormData.EquipmentName' class="custom-cell"
								@click="openBaseScreen('设备','radio')"></u-cell>
						</u-cell-group>
					</view>

				</view>
				<view class="BottomBox">
					<button class="SaveBtn" @click="ResetBtn">重置</button>
					<button class="SubBtn" @click="submit">确认</button>
				</view>
			</view>
			<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
				@confirm='pickerConfirm'></u-datetime-picker>
		</u-popup>
		<m-pda-scancode v-if="$utils.isPda()" listenName="BatchEditScan"
			:SetContent="{action:$store.state.systemConfig.sysDeviceInfo.broadcastAction,extra:$store.state.systemConfig.sysDeviceInfo.broadcastResult}"></m-pda-scancode>
	</view>

</template>

<script>
	import TabBar from '@/st_device/common/TabBar.vue'; // 引入底部导航栏组件
	import {
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime
	} from '@/st_device/common/base.js';

	export default {
		components: {
			TabBar
		}, // 注册组件
		data() {
			return {
				PickerIndex: 1, // 时间弹层的层级
				StartDate: null, // 限制开始时间
				EndDate: Date.now(), // 结束时间
				singleTimes: [getBefore7DateTime(), getFormatDateTime(new Date())], // 日期选择控件

				popuptitle: '提示',
				popupcontent: '请选择设备',
				ShowFilterPopup: false,
				moduleData_show: [],

				dataList: [],
				APPFunID: 0,
				tabIndex: 0,
				showLeft: false,
				FormData: {
					EquipmentID: 0,
					EquipmentName: '全部',
					PageIndex: 1,
					PageSize: 30,
					FBDate: '',
					FEDate: '',
				},
				TimeName: '',
				show: false,
				value1: Number(new Date()),
				hoveredIndex: null,
				disabled: false,
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
				st_device_ChoiceShow: false
			}

		},
		onShow() {
			// 页面显示时，清除hover效果  
			this.clearHovered();
			this.getValue
			this.getList
			this.addst_device_Choice()
		},
		onLoad() {
			var that = this;
			this.FormData.FBDate = getBefore7DateTime()
			this.FormData.FEDate = getFormatDateTime(new Date())


			this.moduleData_show = this.$store.state.GuyueModule.ModuleData
			this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
		},
		onUnload() {
			uni.$off('st_device_Choice');
			uni.$off('BatchEditScan');
		},
		mounted() {
			var that = this;
			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			})
			this.addst_device_Choice()
			// PDA扫码处理
			uni.$on('BatchEditScan', function(content) {
				let scanData = that.$utils.wmsFun.scanTransf(content);
				that.scanHandler(scanData);
			})
		},
		methods: {
			scanHandler(scanData) {
				let that = this;
				console.log(scanData);
				that.DeviceIDChange(scanData.recode, 'pda')
			},
			DeviceIDChange(res, name) {
				let that = this;

				function startsWithEQRegex(str) {
					return /^EQ/.test(str) || /^SB/.test(str);
				}
				let IsDevice = startsWithEQRegex(res)
				if (IsDevice) {
					var id = res.replace(/^.*?\|/, '')
					console.log(id);
					that.Request.request('getEquipment', {}, (ret) => {
						console.log(ret);
						if (ret.status == 200) {
							var obj = ret.data.ds.find(item => item.EquipmentID == id)
							that.scanClick(obj)
						}
					})
				}
			},
			ChangeDate() { // 修改日期
				var that = this;
				that.PickerIndex = 1;


				this.FormData.FBDate = this.singleTimes[0]
				this.FormData.FEDate = this.singleTimes[1]
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			addst_device_Choice() {
				var that = this;
				uni.$on('st_device_Choice', function(ret) {
					console.log(ret);
					if (ret.type == '设备') {
						that.FormData.EquipmentName = ret.data.EquipmentName
						that.FormData.EquipmentID = ret.data.EquipmentID

					}
				});
			},

			closeFilterPopup() { // 关闭筛选弹层
				this.ShowFilterPopup = false;
			},
			OpenFilterPopup() { // 点击打开筛选
				this.ShowFilterPopup = true;
			},
			changeTab(item) { // 切换tab任务
				var that = this;
				console.log(item);
				that.FormData.BYStatus = item.data.value
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			scan() {
				let that = this;
				this.$scanPopup.openScan({
					success: function(res) {
						console.log(res);
						that.DeviceIDChange(res.result, 'phone')
					},
					fail: function(fail) {
						console.log(fail);
					}
				})

			},
			scanClick(e) {
				var url = `./spotcheckDetail?EquipmentObj=${JSON.stringify(e)}`
				this.GonavigateTo(url)
			},
			getList() {
				let that = this;


				that.addst_device_Choice()
				that.contents = []; // 假设这是异步获取数据的操作
				that.$refs.paging.reload();
			},
			getValue(e) {
				console.log(e);
				if (e != '返回') {
					this.FormData.EquipmentID = e.EquipmentID
					this.FormData.EquipmentName = e.name
					this.$forceUpdate()
				}

			},

			openBaseScreen(str, type) { // 前往筛选页
				let that = this;
				let obj = null;
				let url = '/commonPage/Tool/baseScreen';
				if (str == '设备') {
					obj = {
						allowClear: false,
						cmd: 'getEquipment',
						type: str,
						ListeningName: 'st_device_Choice',
						serverSearch: {
							isPaging: false, //是否分页
							searchKey: 'EquipmentName', //搜索关键词，应包含在param中
							showText: 'EquipmentName', //查询结果显示的字段
							pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
							ChoiceDataKey: 'EquipmentID',
							ChoiceDataData: that.FormData.EquipmentID,
						},
						param: {
							EquipmentName: '',
							PageIndex: 1,
							PageSize: 30
						}
					}
				}
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})
				uni.navigateTo({
					url: url
				})
			},

			changePopup() {

			},
			addTime(name) {
				this.TimeName = name
				if (this.TimeName == '开始') {
					this.value1 = Number(getTimeStamp(this.FormData.FBDate))
				} else {
					this.value1 = Number(getTimeStamp(this.FormData.FEDate))
				}
				this.show = true
			},

			pickerConfirm(e) {
				var time = getFormatDateTime(e.value)
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
				} else {
					this.FormData.FEDate = time
				}
				this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
				this.show = false
			},
			search() {
				this.$refs.popup.open('bottom')
			},
			ResetBtn() {
				let that = this;
				this.FormData.EquipmentID = 0
				this.FormData.EquipmentName = '全部'
				this.FormData.FBDate = getBefore7DateTime()
				this.FormData.FEDate = getFormatDateTime(new Date())
				this.singleTimes = [this.FormData.FBDate, this.FormData.FEDate]
			},
			submit() {
				let that = this;

				this.ShowFilterPopup = false
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			add() {
				let that = this;
				var url = './spotcheckDetail'
				this.GonavigateTo(url)
			},

			queryList(pageNo) {
				let that = this;
				that.FormData.PageIndex = pageNo
				uni.showLoading({
					title: '加载数据中...',
				});
				try {
					that.Request.request('getCheckuEquipmentList', this.FormData, function(ret) {
						console.log(ret);
						if (ret.status == 200) {
							uni.hideLoading();
							ret.data.ds.map((item) => {
								item.BillDate = item.BillDate ? item.BillDate.replace('T', ' ')
									.split('.')[0] : ''
							})
							that.$refs.paging.complete(ret.data.ds);
						}
					})
				} catch (e) {
					uni.hideLoading();
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}
			},
			itemClick(item, index) {
				this.hoveredIndex = index;
				var url = `./spotcheckDetail?CheckupEquipmentID=${item.CheckupEquipmentID}`
				this.GonavigateTo(url)


			},
			GonavigateTo(url) {
				let that = this;
				if (that.disabled == false) {
					that.disabled = true
					uni.navigateTo({
						url: url,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 300 // 动画时长
					});
					setTimeout(() => {
						that.disabled = false
					}, 2000)
				}
			},
			changeLevel(data, row) {
				let routes = getCurrentPages(); //当前页面栈
				let backIndex = routes.length - row.length; // 计算返回页面栈数

				uni.navigateBack({
					delta: backIndex
				})

			},
			clearHovered() {
				this.hoveredIndex = null; // 清除hover的tr索引  
			},
		},


		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style lang="scss">
	@import "./css/index.css";

	.content {
		background-color: #eeeeee;
		// padding: 0 10px !important;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.icon-flip-vertical {
			display: inline-block;
			/* 或者其他适合你的布局的display值 */
			transform: scaleY(-1);
			/* 垂直翻转 */
		}

		.MainList {
			flex: 1;
			overflow: auto;
			padding: 10px;
			position: relative;
		}


		// 顶部tab栏
		.TabsBox {
			padding: 10px 15px;
			background-color: #fff;
			border-bottom: 2px solid #eee;
			display: flex;
			align-items: center;

			.u-tabs__wrapper__nav__item__text {
				padding: 4px 10px !important;
			}

			.example-body {
				width: 90%;
				// padding: 6px 20px;
				color: #fff;
				background-color: #51d0d0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-date {
					background-color: #fff;

					.uni-date-editor--x {
						background-color: #fff !important;
					}

					.uni-date__icon-clear {
						background-color: #fff !important;
					}
				}

				.BtnBox {
					margin-left: 8rpx;
				}
			}

		}

		.CardBox {
			position: relative;
			background-color: #fff;
			border-radius: 12px;
			padding: 10px !important;
			margin: 10px 0;


			// 卡片盒子右上角图标
			.RightTop {
				position: absolute;
				right: 0;
				top: 0;
				width: 50px;
				height: 50px;
				line-height: 50px;
				border-radius: 8px;
				background-color: transparent;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;

				.IconBox {
					width: 30px;
					height: 30px;
					line-height: 30px;
					border-radius: 8px;
					background-color: #f1f1f1;
					text-align: center;
				}
			}

			.CardMainBox {
				display: flex;
				flex-direction: column;

				.CardTop {

					.OrderStatus {
						font-size: 24rpx;
						font-weight: 600;
						padding: 6rpx 12rpx;
						border-radius: 99999px;
						width: fit-content;
						min-width: 100rpx;
						text-align: center;
						letter-spacing: 2rpx;

						background-color: #e8e8e8;
						color: #3c3c3c;
					}


					.OrderStatus_-1 {
						background-color: #d9f5ec;
						color: #269b74;
					}


					.OrderStatus_0 {
						background-color: #e8e8e8;
						color: red;
					}


					.OrderStatus_1 {
						background-color: #d9f5ec;
						color: #269b74;
					}


					.OrderStatus_2 {
						background-color: #d9f5ec;
						color: #269b74;
					}


				}
			}

		}


	}

	.MainPopup {
		flex: initial !important;

		.u-transition {
			z-index: 99999 !important;
		}

		.ProgressBox {
			display: flex;
			flex-direction: column;
			padding: 20px;
			min-width: 70vw;
			position: relative;

			.Type {
				border-radius: 14px;
				font-weight: 600;
				padding: 4px 8px;
				font-size: 14px;
				position: absolute;
				top: 16px;
				right: 20px;

			}


			.Type_0 {
				background-color: #e8e8e8;
				color: #3c3c3c;
			}


			.Type_1 {
				background-color: #d9f5ec;
				color: #269b74;
			}


			.Type_-1 {
				background-color: #f5fccd;
				color: #d0d30b;
			}


			.Type_2 {
				background-color: #d7eefc;
				color: #1d87cf;
			}

			.TitleName {
				// font-size: 16px;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.PickerClass {
			flex: initial !important;
		}

		.PopupMainBox {
			padding: 15px;
			flex: 1;
			overflow: auto;
			padding-bottom: 20px;

			.custom-cell {
				background-color: transparent !important;
				/* 阻止背景色变化 */
				color: inherit !important;
				/* 阻止字体颜色变化 */
			}

			.CheckBox {
				margin-top: 20px;
			}


			.My_Picker_Box {
				padding: 6px 4px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #e5e5e5;
				border-radius: 4px;

				.PickMainBox {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					color: #666;

					.My_Picker_Text {
						flex: 1;
						text-align: center;
					}
				}
			}
		}

		.MainBox {
			padding: 0px 2px;
			flex: 1;
			overflow: auto;
		}

	}

	.BottomBox {
		height: 70px;
		line-height: 70px;
		padding: 6px 15px;
		border-top: 1px solid #efefef;
		display: flex;
		align-items: center;
		background-color: #fff;

		.SaveBtn {
			width: 40%;
			background-color: #fff;
			color: #51d0d0;
			border: 1px solid #51d0d0;
			border-radius: 12px;
		}

		.SubBtn {
			width: 40%;
			background-color: #51d0d0;
			color: #fff;
			border-radius: 12px;
		}
	}
</style>